import React from 'react';
import { Button, Pagination  } from 'antd';
import './index.less';
import isMobile from "../../../../../utils/mobileDetect";
import fillin from '../../../../../apis/fillin';
import { WeaLocaleProvider } from "ecCom";
import { inject, observer } from "mobx-react";

const getLabel = WeaLocaleProvider.getLabel;
const isMobileView = isMobile();

@inject('edcFormViewStore', 'routing')
export default class RepairList extends React.Component {
  repairListRef = React.createRef();
  store = this.props.edcFormViewStore;

  state = {
    current: 1,
    pageSize: 10,
    originDates:[],
    repairDayList: [],
  };

  componentDidMount() {
    const { shortkey } = this.store;

    fillin.getMakeUpDate(shortkey).then(res => {
      
      let dates = res.dates.reverse();
      let newDates = dates;

      if (res.type !== 'DAILY_REPEAT'){
        newDates = newDates.map((item) => {
          const itemArr = item.split(',');
          item = `${itemArr[0]} (${getLabel('16100', '周一')}) ~ ${itemArr[1]} (${getLabel('16106', '周日')})`;
          return item;
        })
      }
      this.setState({ repairDayList: newDates, originDates: dates })
    })
  }

  onPageChange = (index) => {
    this.setState({ current: index })
  }

  onRepairClick = (index) => {
    const { shortkey, setRepairDate } = this.store;
    const { originDates, pageSize, current } = this.state;
    const i = (current - 1) * pageSize + index;
    const date = originDates[isMobileView ? index : i];
    const { routing } = this.props;
    
    setRepairDate(date);
    window.fromRouter = 'repair';
    routing.history.push({//本地开发模式需改成/edc/formview/${shortkey}
      pathname: `/`
    })
  }

  _onScroll = () => {
    let { current } = this.state;
    const scrollEle = this.repairListRef.current;

    if ((scrollEle.scrollHeight - scrollEle.clientHeight)  - scrollEle.scrollTop < 10) {
      this.onPageChange(current + 1);
    }
  }

  renderPCView = (pageList,total) => {
    const { current, pageSize } = this.state;

    return (
      <div className='list'>
        <ul>
          <li className='repair-item title'>
            <div className='date'>
              <div className='text' style={{ 'paddingLeft': 10 }}>{getLabel('22823', '日期')}</div>
            </div>
            <div className='opt'>{getLabel('30585', '操作')}</div>
          </li>
          {
            pageList.map((rdl, index) => (
              <li className='repair-item'>
                <div className='date'>
                  <div className='text'>{rdl}</div>
                </div>
                <div className='opt'>
                  <Button type="primary" onClick={() => { this.onRepairClick(index) }}>{getLabel('26927', '补交')}</Button>
                </div>
              </li>
            ))
          }
        </ul>
        <div className='repair-page'>
          <Pagination defaultCurrent={1} current={current} pageSize={pageSize} total={total} onChange={this.onPageChange} />
        </div>
      </div>
    );
  }

  renderMobileView() {
    const { current, pageSize, repairDayList } = this.state;

    if(repairDayList.length <= 0) return;
    const startIndex = 0;
    const endIndex = pageSize * current;
    const pageList = repairDayList.slice(startIndex, endIndex);

    return (
      <div className='mobile-repair-list'>
      <ul>
        <li className='repair-item title'>
          <div className='date'>
              <div className='text' style={{ 'paddingLeft': 10 }}>{getLabel('22823', '日期')}</div>
          </div>
            <div className='opt'>{getLabel('30585', '操作')}</div>
        </li>
      </ul>
        <ul
        className='main'
          ref={this.repairListRef}
          onScroll={() => this._onScroll()}
        >
          
          {
            pageList.map((rdl, index) => (
              <li className='repair-item'>
                <div className='date'>
                  <div className='text'>{rdl}</div>
                </div>
                <div className='opt'>
                  <Button type="primary" onClick={() => { this.onRepairClick(index) }}>{getLabel('26927', '补交')}</Button>
                </div>
              </li>
            ))
          }
        </ul>
      </div>
    );
  }

  render () {
    const { current, pageSize, repairDayList } = this.state;
    const startIndex = pageSize * (current - 1) === 0 ? 0 : pageSize * (current - 1);
    const endIndex = pageSize * current; 
    const pageList = repairDayList.slice(startIndex, endIndex);
    
    return (
      <div className='repair-list'>
        <div className='content'>
          <div className='header'>
            <span>{getLabel('519969', '您有以下日期未填写表单，请进行补交操作')}</span>
            {
              !isMobileView &&
              <Button type="primary" onClick={() => window.history.go(-1)}>{getLabel('129071', '返回表单')}</Button>
            }
          </div>
          {
            isMobileView ?
              this.renderMobileView() :
              this.renderPCView(pageList, repairDayList.length)
          }
        </div>
      </div>
    );
  }
}